<template>
	<view class="content">
		<view class="header">
			<image src="/static/tushu-login/logo.png"></image>
		</view>
		
		<view class="list">
			<view class="list-call">
				<image class="img" src="/static/tushu-login/1.png"></image>
				<input class="sl-input" v-model="phone" type="tel" maxlength="11" placeholder="输入手机号"/>
			</view>
			<view class="list-call">
				<image class="img" src="/static/tushu-login/2.png"></image>
				<input class="sl-input" v-model="password" type="password" maxlength="32" placeholder="输入密码" @confirm="bindLogin"/>
			</view>
		</view>
		
		<view class="button-login" hover-class="button-hover" @click="bindLogin()" :class="{ 'button-disabled': loading }">
			<text>{{ loading ? '登录中...' : '登录' }}</text>
		</view>
		
		<view class="agreement">
			<navigator url="forget" open-type="navigate">忘记密码</navigator>
			<text>|</text>
			<navigator url="reg" open-type="navigate">注册账户</navigator>
		</view>
	</view>
</template>

<script>
  // 后端基础地址
  const API_BASE_URL = "http://localhost:3001/api/user";
  
  export default {
	name: 'Login',
	data() {
	  return {
		phone: '', // 为了方便测试，可以设置默认值
		password: '',
		loading: false
	  }
	},
	methods: {
	  bindLogin() {
		if (this.loading) return;
		
		if (!this.validateForm()) {
		  return;
		}
		
		this.loading = true;
		this.realLoginRequest();
	  },
	  
	  validateForm() {
		if (!this.phone) {
		  uni.showToast({
			icon: 'none',
			title: '请输入手机号'
		  });
		  return false;
		}
		
		if (this.phone.length !== 11 || !/^1[3-9]\d{9}$/.test(this.phone)) {
		  uni.showToast({
			icon: 'none',
			title: '手机号格式不正确'
		  });
		  return false;
		}
		
		if (!this.password) {
		  uni.showToast({
			icon: 'none',
			title: '请输入密码'
		  });
		  return false;
		}
		
		if (this.password.length < 6) {
		  uni.showToast({
			icon: 'none',
			title: '密码至少6位'
		  });
		  return false;
		}
		
		return true;
	  },
	  
	  realLoginRequest() {
		uni.request({
		  url: `${API_BASE_URL}/login`,
		  method: 'POST',
		  header: {
			'content-type': 'application/json'
		  },
		  data: {
			phone: this.phone,
			password: this.password
		  },
		  success: (res) => {
			console.log('完整响应:', res);
			this.loading = false;
			
      if (res.statusCode === 200) {
              const response = res.data;
			  console.log('登录响应数据:', response);
			  
			  // 修改这里：后端返回的是 code 而不是 status
              if (response.code === 200) {
                this.handleLoginSuccess(response);
			  } else {
				uni.showToast({
				  title: response.msg || '登录失败',
				  icon: 'none'
				});
			  }
			} else {
			  uni.showToast({
				title: `请求失败，状态码: ${res.statusCode}, 错误: ${res.data.msg || '未知错误'}`,
				icon: 'none'
			  });
			}
		  },
		  fail: (err) => {
			console.error('登录请求失败:', err);
			this.loading = false;
			uni.showToast({
			  title: '网络请求失败，请检查后端服务是否启动',
			  icon: 'none'
			});
		  },
		  complete: () => {
			console.log('登录请求完成');
		  }
		});
	  },
	  
	  handleLoginSuccess(loginData) {
    // 保存token和用户信息（与后端统一）
    uni.setStorageSync('token', loginData.data.token);
    uni.setStorageSync('userInfo', loginData.data.user);
		
		uni.showToast({
		  title: loginData.msg || '登录成功',
		  icon: 'success',
		  duration: 1500
		});
		
		console.log('登录成功，用户信息:', loginData.data.user);
		console.log('Token:', loginData.data.token);
		
		// 跳转到首页
		setTimeout(() => {
		  uni.switchTab({
			url: '/pages/index/index'
		  });
		}, 1500);
	  }
	}
  }
</script>

<style>
	/* 样式保持不变 */
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.header {
		width: 161rpx;
		height: 161rpx;
		background: rgba(63, 205, 235, 1);
		box-shadow: 0rpx 12rpx 13rpx 0rpx rgba(63, 205, 235, 0.47);
		border-radius: 50%;
		margin-top: 30rpx;
		margin-left: auto;
		margin-right: auto;
	}
	
	.header image {
		width: 161rpx;
		height: 161rpx;
		border-radius: 50%;
	}
	
	.list {
		display: flex;
		flex-direction: column;
		padding-top: 50rpx;
		padding-left: 70rpx;
		padding-right: 70rpx;
	}
	
	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		color: #333333;
		border-bottom: 0.5px solid #e2e2e2;
	}
	
	.list-call .img {
		width: 40rpx;
		height: 40rpx;
	}
	
	.list-call .sl-input {
		flex: 1;
		text-align: left;
		font-size: 32rpx;
		margin-left: 16rpx;
	}
	
	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}
	
	.button-hover {
		background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
	}
	
	.button-disabled {
		opacity: 0.6;
	}
	
	.agreement {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		margin-top: 80rpx;
		color: #FFA800;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
	}
	
	.agreement text {
		font-size: 24rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}
	
	.sl-input::placeholder {
		color: #ccc;
		font-size: 30rpx;
	}
</style>